<template>
  <view class="splash-bg">
    <view class="status-bar">
      <text class="time">9:41</text>
      <view class="status-icons">
        <text class="icon-signal" />
        <text class="icon-wifi" />
        <text class="icon-battery" />
      </view>
    </view>
    <view class="splash-content fade-in-up">
      <text class="splash-title">练面试</text>
      <text class="splash-subtitle">Ai助手模拟面试，学长学姐专人指导.</text>
    </view>
    <view class="splash-indicator">
      <view class="dot scale-in" />
      <view class="dot active scale-in" style="animation-delay:0.1s" />
      <view class="dot scale-in" style="animation-delay:0.2s" />
    </view>
  </view>
</template>

<script>
export default {
  onLoad() {
    setTimeout(() => {
      uni.redirectTo({ url: '/pages/index/splash-3' });
    }, 3000);
  }
}
</script>

<style scoped>
.splash-bg {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, #f7f8fa 0%, #f2f3f7 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.status-bar {
  width: 100vw;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40rpx;
  margin-top: 16rpx;
}
.time {
  font-size: 28rpx;
  color: #222;
}
.status-icons {
  display: flex;
  align-items: center;
}
.icon-signal, .icon-wifi, .icon-battery {
  width: 32rpx;
  height: 32rpx;
  margin-left: 8rpx;
  background: #ccc;
  border-radius: 8rpx;
}
.splash-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.splash-title {
  color: #333;
  font-size: 48rpx;
  font-weight: bold;
}
.splash-subtitle {
  color: #666;
  font-size: 28rpx;
  margin-top: 32rpx;
}
.splash-indicator {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 80rpx;
  gap: 24rpx;
}
.dot {
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background: #e0e0e0;
  transition: background 0.3s, transform 0.3s;
}
.dot.active {
  background: #00B386;
  transform: scale(1.2);
}
.fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(.4,0,.2,1);
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.scale-in {
  animation: scaleIn 0.5s cubic-bezier(.4,0,.2,1) backwards;
}
@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
</style> 